<template>
	<div class="dialog-container">
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" :close-on-click-modal="false" width="600px">
			<el-form :model="state.queryParams" ref="queryFormRef" inline>
				<el-form-item label="用户昵称" prop="keyword">
					<el-input v-model="state.queryParams.keyword" clearable placeholder="请输入用户昵称" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onQuery">
						<el-icon>
							<ele-Search />
						</el-icon>
						查 询
					</el-button>
					<el-button @click="onResetQuery">
						<el-icon>
							<ele-Refresh />
						</el-icon>
						重 置
					</el-button>
				</el-form-item>
			</el-form>
			<el-tabs v-model="state.queryParams.tab">
				<el-tab-pane :label="state.numData.number1" name="all" />
				<el-tab-pane :label="state.numData.number2" name="direct" />
				<el-tab-pane :label="state.numData.number3" name="indirect" />
			</el-tabs>
			<el-table :data="state.tableList" v-loading="state.loading">
				<el-table-column label="用户头像" align="center" prop="avatar">
					<template #default="{ row }">
						<el-avatar :src="row.avatar" shape="square" />
					</template>
				</el-table-column>
				<el-table-column label="用户昵称" align="center" prop="nickname" />
				<el-table-column label="用户身份" align="center" prop="identity" :formatter="formatterIdentity" />
				<el-table-column label="加入时间" align="center" prop="create_time" :formatter="formatterCreateTime" />
			</el-table>
			<template #footer>
				<PaginationComponent
					v-if="state.total"
					:total="state.total"
					v-model:page="state.queryParams.pageNum"
					v-model:limit="state.queryParams.pageSize"
					@pagination="getList"
				/>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { reactive, ref, watch } from 'vue';

import { usersApi } from '/@/api';
import { timeDictionary } from '/@/utils/dictionary';

const UsersApi = usersApi();
const state = reactive({
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
		submitLoading: false,
	},
	queryParams: {
		keyword: '',
		user_id: '',
		tab: 'all',
		pageNum: 1,
		pageSize: 10,
	},
	tableList: [],
	loading: false,
	total: 0,
	numData: {
		number1: '全部',
		number2: '直推团队',
		number3: '间推团队',
	},
});
const queryFormRef = ref();

watch(
	() => state.queryParams.tab,
	() => getList()
);

/********** 触发事件 **********/
// 查询
const onQuery = () => {
	state.queryParams.pageNum = 1;
	getList();
};
// 重置查询
const onResetQuery = () => {
	queryFormRef.value.resetFields();
	onQuery();
};

/********** 方法事件 **********/
// 打开
const openDialog = (row: any) => {
	state.dialog.isShowDialog = true;
	state.dialog.title = `「${row.nickname}」团队`;
	state.queryParams = {
		keyword: '',
		user_id: row.id,
		tab: 'all',
		pageNum: 1,
		pageSize: 10,
	};
	getList();
};
// 刷新列表
const getList = () => {
	state.loading = true;
	_teamList(state.queryParams);
};
// 用户身份字典
const formatterIdentity = (row: any) => {
	switch (row.identity) {
		case 0:
			return '普通用户';
		case 1:
			return '铜牌会员';
		case 2:
			return '银牌会员';
		case 3:
			return '金牌会员';
		default:
			return '未知错误';
	}
};
// 加入时间字典
const formatterCreateTime = (row: any) => {
	return timeDictionary(row.create_time);
};

/********** 网络请求 **********/
// 我的团队
const _teamList = (params: Object) => {
	UsersApi.teamList(params)
		.then((res) => {
			state.tableList = res.data.list;
			const info = res.data.info.num_info;
			state.numData = {
				number1: info.all_num ? `全部【${info.all_num}】` : '全部',
				number2: info.direct_num ? `直推团队【${info.direct_num}】` : '直推团队',
				number3: info.indirect_num ? `间推团队【${info.indirect_num}】` : '间推团队',
			};
			state.total = info[state.queryParams.tab + '_num'];
			state.loading = false;
		})
		.catch(() => (state.loading = false));
};

/********** 方法向父组件暴露 **********/
defineExpose({ openDialog });
</script>
